<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <div class="out-border content">
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText"
        ></el-input>
        <el-tree
          class="filter-tree mt20"
          :data="categoryData"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          ref="tree"
          @node-click="onNodeClick"
        ></el-tree>
      </div>
    </el-col>
    <el-col :span="16">
      <el-tabs type="border-card" v-if="categoryId">
        <el-tab-pane
          :label="item.serviceName"
          class="tab-content"
          v-for="item in subTabs"
          :key="item.serviceId"
        >
          <PriceTree
            :categoryName="categoryName + '>' + item.serviceName"
            :serviceUnit="item.serviceUnit"
            :saasId="saasId"
            :serviceId="item.serviceId"
            :categoryId="categoryId"
          />
        </el-tab-pane>
      </el-tabs>
      <el-empty :image-size="200" v-else></el-empty>
    </el-col>
  </el-row>
</template>
<script>
import { apiServiceCategoryTree } from "@/api/serviceCategory";
import {
  apiServiceQuotationUpdate,
  apiServiceQuotationGetServiceQuotationList,
  apiGetServiceInfoByCategoryId,
} from "@/api/serviceClassify.js";
import PriceTree from "./components/priceTree.vue";
export default {
  components: { PriceTree },
  props: {
    categoryType: {
      type: String,
      default: "",
    },
    saasId: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      filterText: "",
      categoryData: [],
      subTabs: [],
      categoryId: "",
      categoryName: "",
      defaultProps: {
        children: "children",
        label: "categoryName",
        value: "categoryId",
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    categoryType: {
      handler(nVal) {
        if (nVal) {
          this.getData();
        }
      },
      immediate: true,
    },
  },

  methods: {
    onNodeClick(e) {
      console.log(e);
      if (!e.children && this.categoryId != e.categoryId) {
        this.categoryId = e.categoryId;
        this.categoryName = e.categoryName;
        this.getServiceInfoByCategoryId(this.categoryId);
      }
    },
    getData() {
      apiServiceCategoryTree({
        serviceCategoryType: this.categoryType,
      }).then((response) => {
        this.categoryData = response.data;
      });
    },
    getServiceInfoByCategoryId(categoryId) {
      apiGetServiceInfoByCategoryId({ categoryId }).then((res) => {
        this.subTabs = res.data;
      });
    },

    filterNode(value, data) {
      if (!value) return true;
      return data.categoryName.indexOf(value) !== -1;
    },
  },
};
</script>
<style scoped lang="scss">
.content {
  height: calc(100vh - 260px);
  overflow: auto;
}
.tab-content {
  height: calc(100vh - 330px);
}
::v-deep .filter-tree .is-current {
  color: #1890ff !important;
}
</style>
